<template>
	<view class="property-detail-container">
		<geek-list :enabled="false" ref="list" :api="fetchList" isPage>
			<block #default="{item}">
				<uni-list-item class="item">
					<template v-slot:header>
						<view class="time-box">
							<view class="date">
								{{item.date}}
							</view>
							<view class="time">
								{{item.time}}
							</view>
						</view>	
					</template>
					<template v-slot:body>
						<uni-icons custom-prefix="iconfont" :color="item.color" :type="item.icon" size="40"></uni-icons>
					</template>
					<template v-slot:footer>
						<view class="info">
							<view class="price" :style="{color:item.priceColor}">
								<uni-tag text="待审核" type="info" size="mini" v-if="item.status === 0" />
								<uni-tag text="已通过" type="success" size="mini" v-if="item.status === 1" />
								<uni-tag text="不通过" type="warning" size="mini" v-if="item.status === 2" />&nbsp;
								<text>{{$formatPrice(item.amount)}}</text>
							</view>
							<view class="des">
								<text v-if="item.typeName">{{item.typeName}}</text>
								<text v-if="item.orderNo">{{item.orderNo}}</text>
							</view>
						</view>	
					</template>
				</uni-list-item>
			</block>
		</geek-list>
	</view>
</template>

<script>
	import _ from 'lodash'
	import { history } from '@/api/seller/withdrawal.js'
	
	export default{
		data(){
			return {
				list:[]
			}
		},
		
		computed:{
			accountInfo() {
				return this.$store.state.user?.account || {}
			},
			myAccountId() {
				return this.accountInfo?.id || ''
			}
		},
		
		watch:{
			myAccountId(){
				this.$refs.list.resetList()
			}
		},
		
		methods:{
			fetchList(data){
				return history(data).then((res) => {
					return {
						...res,
						rows:_.map(res?.rows || [],vo => {
							return {
								...vo,
								typeName: '提现',
								orderNo: vo.withdrawalNum,
								color:_.get(this.enums,`${vo.bizType}.color`,'#909399') || '#909399',
								priceColor:vo.fundDirection == 1 ? '#fa3534' : vo.fundDirection == 2 ? '#19be6b' : '#303133',
								icon:_.get(this.enums,`${vo.bizType}.icon`,'icon-jine') || 'icon-jine',
								unit:vo.fundDirection == 1 ? '+' : vo.fundDirection == 2 ? '-' : '',
								date:this.$u.timeFormat(vo.createTime,'mm-dd'),
								time:this.$u.timeFormat(vo.createTime,'hh:MM')
							}
						})
					}
				})
				
				return null
			}
		},
		
		onReachBottom() {
			this.$refs.list.onScrollToLower()
		},
		
		//下拉刷新
		onPullDownRefresh(){
			this.$refs.list.resetList()
			uni.stopPullDownRefresh()
		},
		
		onShow(){
			if(this.$refs?.list){
				this.$refs.list.resetList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.property-detail-container{
		padding: 20rpx;
		
		&::v-deep{
			.item{
				border-radius:18rpx;
				padding: 10rpx;
				
				.uni-list-item__container{
					display: flex;
					align-items:center;
					
					.time-box{
						margin-right: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.date{
							white-space:nowrap;
							font-size:34rpx;
							color:#000;
							font-weight:600;
						}
						
						.time{
							color:#999;
							font-size:26rpx;
							margin-top: 10rpx;
						}
					}
					
					.info{
						margin-left: 24rpx;
						display: flex;
						flex-direction: column;
						
						.price{
							font-size:34rpx;
							font-weight:bold;
						}
						
						.des{
							display: flex;
							align-items:center;
							padding: 10rpx 0;
							text{
								white-space: nowrap;
								font-size:26rpx;
								
								& + text{
									margin-left: 24rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>